<template>
  <div>
    <el-card>
      <div slot="header">
        <el-breadcrumb separator="/" >
          <el-breadcrumb-item><a @click="showGrade('1', '2')">一年级</a></el-breadcrumb-item>
          <el-breadcrumb-item><a @click="showGrade('3', '4')">二年级</a></el-breadcrumb-item>
          <el-breadcrumb-item><a @click="showGrade('5', '6')">三年级</a></el-breadcrumb-item>
          <el-breadcrumb-item><a @click="showGrade('7', '8')">四年级</a></el-breadcrumb-item>
          <el-breadcrumb-item><a @click="showGrade('0')">综合</a></el-breadcrumb-item>
          <el-breadcrumb-item><a></a></el-breadcrumb-item>
        </el-breadcrumb>
      </div>
      <div>
        <el-table
          :data="activeData"
          style="width: 100%"
          id="out-table"
          border
          :row-class-name="tableRowClassName">
          <el-table-column
            prop="updateTime"
            label="日期"
            width="200">
            <template slot-scope="scope">
              <i class="el-icon-time"></i>
              <span style="margin-left: 10px">{{ scope.row.updateTime }}</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="grade"
            width="180"
            label="学期">
            <template slot-scope="scope">
              <span style="margin-left: 10px">{{ scope.row.grade | gradeFilter }}</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="courseName"
            label="课程名"
            width="180">
          </el-table-column>
          <el-table-column
            prop="teacherName"
            label="授课教师">
          </el-table-column>
          <el-table-column
            prop="result"
            label="成绩">
            <template slot-scope="scope">
              <span style="margin-left: 10px"></span>
              <el-tag
                :type="scope.row.result >= 60 ? 'success' : 'danger'"
                v-if="scope.row.result"
                effect="dark">
                {{ scope.row.result}}
              </el-tag>
            </template>
          </el-table-column>
        </el-table>
        <br/>
        <el-row>
          <el-col :span="2" :offset="22">
            <el-button type="primary" @click="exportExcel">导出成绩</el-button>
          </el-col>
        </el-row>
      </div>
    </el-card>
  </div>
</template>

<script>
  import {mixin} from "../mixins";
  import {selectAllCourseByStudentId} from "../api/edm";
  import {mapGetters} from 'vuex'
  import FileSaver from 'file-saver'
  const XLSX = require("xlsx");
  export default {
    name: "EDM",
    mixins: [mixin],
    computed: {
      ...mapGetters([
        "userId"
      ])
    },
    filters: {
      gradeFilter(grade){
        switch (grade) {
          case '1':
            return '大一上'
          case '2':
            return '大一下'
          case '3':
            return '大二上'
          case '4':
            return '大二下'
          case '5':
            return '大三上'
          case '6':
            return '大三下'
          case '7':
            return '大四上'
          case '8':
            return '大四下'
        }
      }
    },
    data(){
      return{
        resultData: [],
        activeData: []
      }
    },
    created() {
        this.init()
    },
    methods: {
      init() {
        selectAllCourseByStudentId(this.userId).then(({data}) => {
          if(data.code === 0){
            this.resultData = data.resultVos
            this.showGrade('1', '2')
          }
        }).catch(err => {
          this.notify("初始化失败，请稍后再试", "success");
        })
      },
      exportExcel () {
        if(this.activeData && this.activeData.length > 0){
          let xlsxParam = {raw: true}; //转换成excel时，使用原始的格式
          /* 从表生成工作簿对象 */
          let wb = XLSX.utils.table_to_book(
            document.querySelector("#out-table"),  //elementui 表格的id
            xlsxParam
          );

          /* 获取二进制字符串作为输出  */
          let wbout = XLSX.write(wb, {
            bookType: "xlsx",
            bookSST: true,
            type: "array"
          });
          try {
            FileSaver.saveAs(
              //Blob 对象表示一个不可变、原始数据的类文件对象。
              //Blob 表示的不一定是JavaScript原生格式的数据。
              //File 接口基于Blob，继承了 blob 的功能并将其扩展使其支持用户系统上的文件。
              //返回一个新创建的 Blob 对象，其内容由参数中给定的数组串联组成。
              new Blob([wbout], {type: "application/octet-stream"}),
              //设置导出文件名称
              new Date().getTime() + ".xlsx"
            );
          } catch (e) {
            if (typeof console !== "undefined") console.log(e, wbout);
          }
          return wbout;
        }else{
          this.notify("暂无更多成绩", "warning")
        }
      },
      showGrade(type1, type2){
        if(type1 !== '0'){
          this.activeData = this.resultData.filter(item => {
            return item.grade === type1 || item.grade === type2
          })
        }else{
          this.activeData = this.resultData
        }
      },
      tableRowClassName({row, rowIndex}) {
        if (rowIndex === 1) {
          return 'warning-row';
        } else if (rowIndex === 3) {
          return 'success-row';
        }
        return '';
      }
    }
  }
</script>

<style scoped>

</style>
